<template>
    <div class="emoji-container">
        <!-- 最近使用 -->
        <div class="use-wrap" v-if="historyEmojiList.length">
            <div class="emoji-title">最近使用</div>
            <div class="recently-use-emoji">
                <div class="emoji-item" v-for="(item, index) in historyEmojiList" :key="index" @click="appendEmoji(item,false)">
                    <img :src="`/gif/${item}.gif`" alt="">
                </div>
            </div>
        </div>
        <!-- 所有表情列表 -->
        <div class="emoji-title">小黄脸表情包</div>
        <div class="all-emoji">
            <div class="emoji-item" v-for="(item, index) in 203" :key="index" @click="appendEmoji(item)" >
                <img :src="`/gif/${item}.gif`" alt="">
            </div>
        </div>
    </div>
</template>
 
<script setup>
const historyEmojiList = ref([])

onMounted(() => {
  historyEmojiList.value = localStorage.getItem('emojiHistory') ? JSON.parse(localStorage.getItem('emojiHistory')) : []
})

const recentlyUseEmoji = (index) => {
  let idx = historyEmojiList.value.indexOf(index)
  if (idx < 0) {
    historyEmojiList.value.unshift(index)
  } else {
    historyEmojiList.value.unshift(historyEmojiList.value.splice(idx, 1)[0])
  }
  // 只要两行emoji(16个)
  historyEmojiList.value = historyEmojiList.value.splice(0, 16)
  // 保存记录
  localStorage.setItem('emojiHistory', JSON.stringify(historyEmojiList.value))
}

const emit = defineEmits(['selectEmoji'])
// 点击emoji, 输入框插入emoji回调
const appendEmoji = (i,status) => {
    if(status != false){
        recentlyUseEmoji(i)
    } 
    emit('selectEmoji', i)
}

</script>
 
<style lang="scss" scoped>
.emoji-container {
    width: 100%;
    height: 350px;
    padding: 5px 10px 15px;
    box-sizing: border-box;
    overflow: auto;
 
    &::-webkit-scrollbar {
        display: none;
    }
}
 
.emoji-title {
    font-size: 12px;
    margin: 10px 0 5px;
}
 
.recently-use-emoji,
.all-emoji {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
 
    .emoji-item {
        width: 30px;
        height: 30px;
        margin: 5px 10px;
        cursor: pointer;
 
        img {
            width: 100%;
            height: 100%;
        }
    }
}</style>